<script lang="ts">
  import { Tabs } from '@skeletonlabs/skeleton-svelte';
    import Register from './Register.svelte';
    import AddBook from './AddBook.svelte';
    import Book from './Book.svelte';
    import Transaction from './Transaction.svelte';
    import Borrow from './Borrow.svelte';

  let group = $state('plane');
  const lorem =
    'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum veniam reprehenderit eum, reiciendis obcaecati, excepturi nemo ipsa fugit suscipit autem vitae numquam et cumque praesentium vero eos minus itaque. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum veniam reprehenderit eum, reiciendis obcaecati, excepturi nemo.';
</script>

<div class="main">
    <Tabs value={group} onValueChange={(e) => (group = e.value)}>
  {#snippet list()}
    <Tabs.Control value="register">注册</Tabs.Control>
    <Tabs.Control value="addBook">添加书籍</Tabs.Control>
    <Tabs.Control value="book">书籍管理</Tabs.Control>
    <Tabs.Control value="transaction">借阅记录</Tabs.Control>
    <Tabs.Control value="borrow">借阅管理</Tabs.Control>
  {/snippet}
  {#snippet content()}
    <Tabs.Panel value="register">
      <Register/>
    </Tabs.Panel>
    <Tabs.Panel value="addBook">
      <AddBook/>
    </Tabs.Panel>
    <Tabs.Panel value="book">
      <Book/>
    </Tabs.Panel>
    <Tabs.Panel value="transaction">
      <Transaction/>
    </Tabs.Panel>
    <Tabs.Panel value="borrow">
      <Borrow/>
    </Tabs.Panel>
  {/snippet}
</Tabs>
</div>

<style>
  .main {
    width: 90%;
    margin: 2%;
    padding: 3%;
  }
</style>
